<template>
	<view class="radio">
		<view class="radio_title">
			<text class="text_1">推荐电台</text>
			<view class="radio_box">
				<text class="text_2">更多</text>
			</view>
		</view>
		<view class="radio_nav_box">
			<swiper display-multiple-items="3">
				<swiper-item v-for="(item,index) in result" :key="item.id" >
					<image :src="item.picUrl" class="radio-img_1"></image>
				    <text class="radio-text_1">{{item.name}}</text>
				</swiper-item>
				</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				result: []
			}
		},
		mounted() {
			this.getRecommended()
		},
		methods: {
			getRecommended() {
				uni.request({
					url: 'http://localhost:3000/personalized/djprogram',
					method: 'POST',
					success: (res) => {
						this.result = res.data.result
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.radio {
		margin-top: 2rpx;
		border-top: 1px solid #f8f8f8;
		width: 100%;
		height: 530rpx;
		background-color: #fff;
		border-radius: 30rpx;
		position: relative;
	}
	
	//推荐歌单
	.text_1 {
		font-size: 34rpx;
		font-weight: 600;
		position: absolute;
		top: 20rpx;
		left: 43rpx;
		letter-spacing: 2px;
		color: #424242;
	}
	
	// 更多
	.radio_box {
		background: url(../../static/jt.png) no-repeat;
		background-position: 72rpx 10rpx;
		width: 110rpx;
		height: 55rpx;
		line-height: 50rpx;
		border: 1px solid #e6e6e6;
		border-radius: 24rpx;
		position: absolute;
		top: 20rpx;
		right: 43rpx;
	}
	
	.text_2 {
	
	
		margin-left: 20rpx;
		font-size: 22rpx;
		letter-spacing: 2px;
		font-weight: bold;
		color: #424242;
	}
	
	.radio_title {
		width: 750rpx;
		height: 100rpx;
	}
	
	//推荐歌单
	.radio_nav_box{
		height:220rpx;
		display: flex;
		margin-left:35rpx;
	}
	swiper {
		width: 750rpx;
		height: 300rpx;
		text {
			height: 200rpx;
		}
	
		.radio-img_1 {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10px;
			box-shadow: 2px 2px #ccc;
			
		}
	
		.radio-text_1 {
			width: 210rpx;
			height: 100rpx;
			display: block;
			font-size: 6px;
		}
	}
</style>
